import React, { PureComponent } from 'react';
import { Modal, Table, Badge } from 'antd';
import Ellipsis from '../../components/Ellipsis';
import styles from './dealerUploadModel.less';

export default class DealerUploadModal extends PureComponent {
  state = {
  };

  renderSimpleForm() {
    const { modalVisible, closeModal, listData, handleModalSubmit } = this.props;
    const columns = [{
      title: '状态',
      dataIndex: 'flag',
      key: 'flag',
      width: '6%',
      render: (val) => {
        return val ? <Badge status="success" /> : <Badge status="error" />;
      },
    }, {
      title: '校验结果',
      dataIndex: 'msg',
      key: 'msg',
      width: '15%',
      render: val => (
        <Ellipsis length={10} tooltip>{val}</Ellipsis>
      ),
    }, {
      title: '*代码',
      dataIndex: 'code',
      key: 'code',
      width: '8%',
      render: (text) => {
        return text;
      },
    }, {
      title: '*名称',
      dataIndex: 'name',
      key: 'name',
      width: '15%',
      render: val => (
        <Ellipsis length={10} tooltip>{val}</Ellipsis>
      ),
    }, {
      title: '*简称',
      dataIndex: 'shortName',
      key: 'shortName',
      width: '8%',
      render: val => (
        <Ellipsis length={6} tooltip>{val}</Ellipsis>
      ),
    }, {
      title: '*品牌ID',
      dataIndex: 'brandId',
      key: 'brandId',
      width: '10%',
    }, {
      title: '*大区编码',
      dataIndex: 'areaId',
      key: 'areaId',
      width: '10%',
    }, {
      title: '*省编码',
      dataIndex: 'provinceId',
      key: 'provinceId',
      width: '8%',
    }, {
      title: '*市编码',
      dataIndex: 'cityId',
      key: 'cityId',
      width: '8%',
    }, {
      title: '*建立时间',
      dataIndex: 'openTime',
      key: 'openTime',
    }];
    return (
      <Modal
        style={{ height: 400 }}
        width="80%"
        title="导入详情(请确保所有信息状态均为ok后导入)"
        okText="导入"
        visible={modalVisible}
        onOk={() => handleModalSubmit()}
        onCancel={() => closeModal()}
      >
        <Table
          style={{ overflow: 'auto', height: 400 }}
          rowKey={record => record.sid}
          columns={columns}
          dataSource={listData}
          pagination="true"
        />
      </Modal>
    );
  }


  renderForm() {
    return this.renderSimpleForm();
  }
  render() {
    return (
      <div className={styles.tableListForm}>
        {this.renderForm()}
      </div>
    );
  }
}
